<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<base href="/webproject/day04/">
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<!-- 360高速模式-->
		<meta name="description" content="bootstrap基本模板">
		<meta name="author" content="chengt01">
		<meta name="keywords" content="bootstrap,html5,css3">
		<title>index</title>
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../styles/site.css"/>
		<!--[if lt IE 9]>
		<script src="../scripts/html5.min.js"></script>
		<script src="../scripts/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="container">

		<header class="page-header">
			<h1 class="text-capitalize">spy</h1>
		</header>
		
		<div >
			<div id="alert" class="alert fade in alert-danger hide">
				<p class="lead">评论内容不能为空</p>
			</div>
			<form>
				<div class="form-group">
					<label for="message">评论内容</label>
					<textarea id="txtMsg" rows="5" class="form-control"></textarea>
					
				</div>
				<p><button id="btnSubmit" class="btn-block btn btn-primary" type="button">提交</button></p>
			</form>
			<ul id="divList" class="list-group">
			</ul>
		</div>
		<footer class="navbar-fixed-bottom label-info text-center">
			<p>
				Copyright  &copy;
				<abbr title="tarnna">hajiang</abbr>&trade; 2015 <span class="glyphicon glyphicon-copyright-mark"></span>
			</p>
		</footer>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
		<script>
			$(function(){
				$("#btnSubmit").click(function(){
					var msg = $("#txtMsg").val();
					if(msg==""){
						$("#alert").removeClass()
						.addClass("alert fade in alert-danger");
						$("#alert p").html("提交失败");
					}else{
						$("#alert").removeClass()
						.addClass("alert fade in alert-success");
						$("#alert p").html("提交成功");
						$("#divList").prepend(
						$("<span>").addClass("media glyphicon")
						.append(
						$("<li>")
						.addClass("list-group-item")
						.html(msg)));
					}
					
				});
			});
		</script>
		</body>
</html>
